import { useState, useEffect } from "react";
import Navbar from "../../compoents/Navbar";
import { useNavigate, useLocation } from "react-router-dom";
import style from "./index.module.css";
import { Checkbox,Button } from 'antd-mobile'
import { AlipaySquareFill } from "antd-mobile-icons";
import request from '../../api/request'
import img1 from '../../../src/types/img1.png'
import img2 from '../../../src/types/img2.png'
// 定义API响应类型
interface PayResponse {
  code: number;
  result: string;
  msg?: string;
}
function Index() {
  const navigate = useNavigate();
  const { list } = useLocation().state;
  
  // 支付方式选择状态
  const [selectedPayment, setSelectedPayment] = useState<string>('alipay'); // 默认选择支付宝
   
  const goPay = async() =>{
    // 根据选择的支付方式进行判断
    let paymentType = '';
    if (selectedPayment === 'alipay') {
      paymentType = 'alipay';
      console.log('使用支付宝支付');

      const res: PayResponse = await request.get('/addPay/pay',{
        params:{
          id:Date.now(),// 传递支付方式参数
          title:list[0].title,
          price:list[0].price,
        }
      })
      console.log('获取支付信息',res);
      if(res.code === 200){
        window.location.href = res.data

          const res = await request.get('/addPay/query',{
            params:{
              id:Date.now(),
            }
          })
          console.log('查询支付信息',res);
          
        
      }

      

    } else if (selectedPayment === 'wechat') {
      console.log('使用微信支付');
    }
  }
  
  // 2小时倒计时状态
  const [count, setCount] = useState(7200); // 2小时 = 7200秒

  // 格式化时间显示为 HH:MM:SS
  const formatTime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    return `${hours.toString().padStart(2, "0")}:${minutes
      .toString()
      .padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
  };

  // 倒计时效果
  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => {
        if (prevCount > 0) {
          return prevCount - 1;
        } else {
          return 0;
        }
      });
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className={style.container}>
      <Navbar title="安全支付" showBack onBack={() => navigate(-1)} />

      <div className={style.content}>
        <div className={style.contentBox}>
          <h2>
            ￥<b>{list[0].price}</b>
          </h2>
          <p className={style.timeBox}>
            剩余时间:<span className={style.time}>{formatTime(count)}</span>
          </p>
        </div>

        <div className={style.payBoxdiv}>
          <h3 className={style.payBoxh3}>请选择支付方式</h3>

          <div>
            <div className={style.payBoxs}>
              <div className={style.payBox}>
                <span className={style.payBoxspan}><img src={img1} alt="" className={style.payBoximg}/></span>
                <span className={style.payBoxspanmsg}>支付宝支付</span>
              </div>

              <div><Checkbox checked={selectedPayment === 'alipay'} onChange={() => setSelectedPayment('alipay')}/></div>
            </div>


            <div className={style.payBoxs}>
              <div className={style.payBox}>
                <span className={style.payBoxspan}><img src={img2} alt="" className={style.payBoximg}/></span>
                <span className={style.payBoxspanmsg}>微信支付</span>
              </div>

              <div><Checkbox checked={selectedPayment === 'wechat'} onChange={() => setSelectedPayment('wechat')}/></div>
            </div>


            <div className={style.payBoxs}>
              <div className={style.payBox}>
                <span className={style.payBoxspan}><AlipaySquareFill /></span>
                <span className={style.payBoxspanmsg}>建行龙支付</span>
              </div>

              <div><Checkbox checked={selectedPayment === 'ccb'} onChange={() => setSelectedPayment('ccb')}/></div>
            </div>

            <div className={style.payBoxs}>
              <div className={style.payBox}>
                <span className={style.payBoxspan}><AlipaySquareFill /></span>
                <span className={style.payBoxspanmsg}>招商银行一网通</span>
              </div>

              <div><Checkbox checked={selectedPayment === 'cmb'} onChange={() => setSelectedPayment('cmb')}/></div>
            </div>

            


          </div>
        </div>


        <Button className={style.submitButton} onClick={()=>goPay()} block color="primary" size="large">立即支付 ￥{list[0].price}</Button>
      </div>
    </div>
  );
}

export default Index;
